<template>
    <div>
        <el-button
            type="warning"
            size="small"
            @click="onAddResource"
            style="margin-bottom: 10px"
            >添加资源</el-button
        >

        <el-table
            stripe
            border
            :data="resourceList"
            style="width: 100%; text-align: center"
        >
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="label" label="资源名" />
            <el-table-column prop="path" label="代码" width="180" />
            <el-table-column prop="sort" label="排序" />
            <!-- <el-table-column prop="icon" label="图标" /> -->
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button size="small" @click="onResourceEdit(scope.row)">
                        <el-icon class="el-icon--right"><Edit /></el-icon> 编辑
                    </el-button>
                    <el-popconfirm
                        title="确认删除吗？"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        @confirm="onResourceDelete(scope.row.id)"
                    >
                        <template #reference>
                            <el-button size="small" type="danger"
                                ><el-icon class="el-icon--right"
                                    ><Delete
                                /></el-icon>
                                删除</el-button
                            >
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
            v-model="disableAddResourceForm"
            title="添加资源"
            width="30%"
        >
            <el-form
                :model="resource"
                ref="form"
                :rules="rules"
                label-width="80px"
            >
                <el-form-item label="资源名称">
                    <el-input v-model="resource.name"></el-input>
                </el-form-item>
                <el-form-item label="代码">
                    <el-input v-model="resource.code"></el-input>
                </el-form-item>
                <el-form-item label="序号">
                    <el-input v-model="resource.num"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="onAddResourceSubmit(props.menuId)"
                        >确定</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import { api } from '@/api/index'
const { RequestMenuDelete, RequestResource, RequestAddResource } = api

const props = defineProps({
    menuId: Number,
})
const resourceList = ref([])
let disableAddResourceForm = ref(false)
const resource = ref({ name: '', code: '', num: 1 })
const rules = {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    code: [{ required: true, message: '请输入代码', trigger: 'blur' }],
}
/**
 * 资源列表
 */
const getResourceList = () => {
    RequestResource(props.menuId).then(data => {
        let { resultCode, resultInfo } = data
        if (resultCode === 1) {
            resourceList.value = resultInfo.list
        }
    })
}
/**
 * 添加资源
 */
const onAddResource = () => {
    disableAddResourceForm.value = true
}
/**
 * 提交添加资源
 */
const onAddResourceSubmit = menuId => {
    RequestAddResource({ ...resource.value, menuId }).then(data => {
        let { resultCode } = data
        if (resultCode === 1) {
            disableAddResourceForm.value = false
            getResourceList(menuId)
        }
    })
}

/**
 * 删除资源
 */
const onResourceDelete = menuId => {
    let roleId = 1
    RequestMenuDelete(roleId, menuId).then(data => {
        let { resultCode } = data
        if (resultCode === 1) {
            getResourceList(menuId)
        }
    })
}

onMounted(() => {
    getResourceList()
})
</script>

<style lang="scss" scoped></style>
